<!--
 * @Author: 杨三炮
 * @Date: 2021-11-18 20:56:11
 * @LastEditors: 杨三炮
 * @LastEditTime: 2021-11-23 13:20:00
 * @FilePath: \node\src\components\menu\Login.vue
-->
<template>
  <div
    style="
      width: 25%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    "
  >
    <transition name="el-fade-in-linear">
      <el-card
        class="box-card"
        shadow="hover"
        style="text-align: center"
        @keyup.enter.native="login"
      >
        <div slot="header" class="clearfix" style="text-align: center">
          <h2 style="font-size: 1rem">校园疫情防控管理系统</h2>
        </div>
        <el-input
          prefix-icon="el-icon-user-solid"
          v-model="loginForm.id"
          placeholder="请输入学号"
          class="inp"
        ></el-input>
        <div style="height: 1.3rem"></div>
        <el-input
          prefix-icon="el-icon-lock"
          placeholder="请输入密码"
          v-model="loginForm.password"
          show-password
          class="inp"
        ></el-input>
        <el-radio-group
          v-model="loginForm.type"
          size="small"
          style="
            display: flex;
            justify-content: space-around;
            margin-top: 1.3rem;
          "
        >
          <el-radio label="1" border>管理员</el-radio>
          <el-radio label="2" border>学生</el-radio>
          <el-radio label="3" border>教师</el-radio>
        </el-radio-group>
        <el-button type="primary" class="button" size="small" @click="login"
          >登录</el-button
        >
      </el-card>
    </transition>
  </div>
</template>
<script>
import jwt_decode from 'jwt-decode'
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        id: '11001',
        password: '123',
        type: '2'
      },
    }
  },
  methods: {
   
    async login () {
      if (!this.loginForm.id || !this.loginForm.password) {
        this.$message.warning('用户名密码不能为空')
        this.loginForm.id = ""
        this.loginForm.password = ""
      } else {
        const identity = this.loginForm.type == '1' || this.loginForm.type == '2' ? 'users' : 'teacher'
        try {
          const result = await this.$Axios.post(`${identity}/login`, this.loginForm)
          this.$message.success('登陆成功')
          const { token } = result.data
          //存储到localStorage
          localStorage.setItem('eleToken', token)
          //解析token
          const decode = jwt_decode(token)
          //token存储到vuex中
          this.$store.dispatch('setAuthenticated', !this.isEmpty(decode))
          this.$store.dispatch('setUser', decode)
          let identityRouter = this.loginForm.type == '1' ? '/admin' : (this.loginForm.type == '2' ? 'student' : 'teacher')
          this.$router.push(identityRouter)
        } catch (error) {
          console.log(error)
        }

      }
    },
    isEmpty (value) {
      return (
        value === undefined || value === null ||
        (typeof value === 'object' && Object.keys(value).length === 0) ||
        (typeof value === 'string' && value.trim().length === 0)
      )
    },
  }
}
</script>
<style lang="scss" scoped>
.login {
  h3 {
    text-align: center;
    height: 60px;
    line-height: 20px;
    border-bottom: 1px solid rgb(170, 170, 170);
    color: rgb(92, 92, 92);
  }
  .inp {
    margin-top: 10px;
  }
  .button {
    margin-top: 20px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>